<template>
  <div class="max-w-5xl mx-auto mt-10">
    <n-space vertical size="large">
      <n-alert type="info" title="分析结果"> 共检测到 {{ results.length }} 个故障记录 </n-alert>

      <n-collapse>
        <n-collapse-item
          v-for="(item, index) in results"
          :key="index"
          :title="`故障 ${index + 1}: ${item.fault_type}`"
        >
          <FaultResultCard :result="item" />
        </n-collapse-item>
      </n-collapse>
    </n-space>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'
import FaultResultCard from '@/components/resultCard/index.vue'

const props = defineProps({
  results: {
    type: Array,
    required: true,
  },
})
</script>

<style scoped>
.max-w-5xl {
  max-width: 1000px;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mt-10 {
  margin-top: 2.5rem;
}
</style>
